<style lang="scss" scoped>
.tip {
  padding: 0.2rem;
  background-color: #f0f0f0;
  font-size: 0.34rem;
  color: #8e8f8f;
}

.block {
  padding: 1.8rem 0.4rem;
  text-align: center;

  p {
    padding: 0.2rem;
    font-size: 0.28rem;
  }
}

.completed {
  padding: 0 0 0.2rem 0;
  text-align: center;
}
</style>


<template>
  <div ref="container" class="container hasNav hasTabbar">
    <van-nav-bar title="审批中心" right-text="审批须知" @click-right="$router.push('/common/help')" fixed />

    <van-swipe :height="150" :autoplay="3000" indicator-color="white">
      <van-swipe-item v-for="(item,index) in banners" :key="index">
        <router-link :to="{ path:'/common/article', query:{ index } }">
          <van-image width="100%" height="100%" fit="cover" :src="fileUrl+item.imagePath"></van-image>
        </router-link>
      </van-swipe-item>
    </van-swipe>

    <van-cell title="待接处理审批" center>
      <template slot="right-icon">
        <div @click="refresh">
          <van-icon name="replay" />
        </div>
      </template>
    </van-cell>

    <!-- 已认证 -->
    <div v-if="userInfo.authstatus == 3">
      <div v-if="list.length !== 0">
        <OrderList  type="unreceived" :list="list"></OrderList>
        <p class="completed" v-if="isCompleted">已加载完</p>
      </div>

      <div v-if="!msg && list.length === 0" class="block">
        <p>
          <van-icon name="user-o" color="#179AFE" size=".8rem" />
        </p>
        <p>当前没有审批任务</p>
        <p>
          <van-button type="default" icon="replay" color="#179AFE" block @click="refresh">刷新</van-button>
        </p>
      </div>

      <div v-if="msg && list.length === 0" class="block">
        <p>
          <van-icon name="fail" color="#179AFE" size=".8rem" />
        </p>
        <p>{{msg}}</p>
      </div>
    </div>

    <!-- 未认证 -->
    <div v-else class="block">
      <p>
        <van-icon name="user-o" color="#179AFE" size=".8rem" />
      </p>
      <p>您还未提交或未通过认证，暂时无法审批</p>
      <p>
        <van-button type="default" color="#179AFE" block @click="$router.push('/user/infos')">去认证</van-button>
      </p>
    </div>

    <Tabbar></Tabbar>

    <Loading :isShow="loading"></Loading>
  </div>
</template>

<script>
import { mapGetters, mapMutations } from 'vuex';
import mixin from '../mixin/index';

import Loading from '../components/Loading';
import Tabbar from '../components/Tabbar';
import OrderList from '../components/OrderList';

import { fileUrl } from '../api/index';
import { getOrderList } from '../api/order';

export default {
  name: 'Home',
  components: {
    Loading,
    Tabbar,
    OrderList
  },
  mixins: [mixin],
  data() {
    return {
      fileUrl,
      loading: true,
      banners: [],
      pageNo: 1,
      pageSize: 10,
      isCompleted: false,
      msg: '',
      list: []
    };
  },
  computed: {
    ...mapGetters(['userInfo'])
  },
  beforeMount() {
    this.getData();
  },
  mounted() {
    this.bindScroll('container', () => {
      if (!this.isCompleted) {
        this.pageNo += 1;
        this.getData();
      }
    });
  },
  methods: {
    ...mapMutations(['setBanners']),
    async getData(clear = false) {
      try {
        this.loading = true;

        const { errorcode, showMsg, banners, records } = await getOrderList({
          page: this.pageNo,
          count: this.pageSize
        });

        if (errorcode == 0) {
          if (banners.length !== 0) {
            this.banners = banners;
            this.setBanners(banners);
          }

          this.msg = showMsg;

          if (records.length !== 0) {
            if (clear) {
              this.list = [];
            }

            this.list.push(...records);
          } else {
            this.isCompleted = true;
          }
        } else {
          this.$toast(message);
        }

        this.$nextTick(() => {
          this.loading = false;
        });
      } catch (error) {
        console.log(error);
        this.loading = false;
      }
    },
    refresh() {
      this.pageNo = 1;
      this.getData(true);
    }
  }
};
</script>

<style scoped lang="scss">
</style>
